<template>
  <div class="main">
    <el-card class="box-card">
      <!-- 表单搜索 -->
      <div class="form_box">
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          style="display: flex; align-items: center"
        >
          <el-form-item label="事件名称">
            <el-input v-model="eventName" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="上报时间">
            <!-- <el-date-picker
              v-model="time"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker> -->
            <!-- <el-date-picker
              v-model="time"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
            > -->
            <el-date-picker
              v-model="time"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="上报渠道">
            <el-cascader
              v-model="channe"
              :options="options"
              :props="{
                value: 'en_name',
                label: 'cn_name',
              }"
              clearable
              @change="channelChange"
            ></el-cascader>
          </el-form-item>
          <el-button
            style="margin-bottom: 20px; margin-left: 10px"
            @click="search"
            >搜索</el-button
          >
        </el-form>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" v-loading="loading" style="width: 100%">
        <el-table-column prop="create_time" label="时间" width="180">
        </el-table-column>
        <el-table-column prop="user_id" label="用户id" width="180">
        </el-table-column>
        <el-table-column prop="event_name" label="事件名称"> </el-table-column>
        <el-table-column prop="num" label="上报数量"> </el-table-column>
        <el-table-column prop="platform" label="上报平台"> </el-table-column>
        <el-table-column prop="utm_source" label="渠道"> </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { buryingReport } from "@/api/DataManagement";
import { channelList } from "@/api/DataManagement"; //渠道接口
export default {
  components: { Pagination },
  data() {
    return {
      loading: true,
      platform: "", //系统
      channel: "", //渠道
      channe: "",
      time: [],
      total: 0,
      page: 1,
      pageSize: 10,
      startTime: "",
      endTime: "",
      eventName: "",
      form: {
        name: "",
      },

      options: [
        {
          en_name: "ios",
          cn_name: "ios",
          children: [],
        },
        {
          en_name: "android",
          cn_name: "安卓",
          children: [],
        },
      ],
      tableData: [],
      pickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    channelChange(e) {
      console.log(e);
      this.platform = e[0];
      this.channel = e[1];
      // console.log(this.platform, this.channel);
    },

    getList() {
      this.buryingReport();
    },
    search() {
      this.startTime = this.time[0];
      this.endTime = this.time[1];
      // console.log(this.time);
      console.log(this.channe);
      this.page = 1;
      this.buryingReport();
    },
    buryingReport() {
      this.loading = true;
      buryingReport({
        page: this.page,
        pageSize: this.pageSize,
        startTime: this.startTime,
        endTime: this.endTime,
        eventName: this.eventName,
        platform: this.platform,
        channel: this.channel,
      }).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.total = parseInt(res.data.total);
          this.loading = false;
        }
      });
    },
  },
  created() {
    this.buryingReport();
    channelList({}).then((res) => {
      // console.log(res);
      this.options[0].children = res.data;
      this.options[1].children = res.data;
      // console.log(this.options[0].children, this.options[1].children);
    });
  },
  watch: {
    time(newVal) {
      if (newVal == null) {
        this.time = [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  padding: 20px;
}
// .form_box {
//   display: flex;
//   align-items: center;
// }
</style>